class Depend {
  constructor() {
    this.reactiveFns = []
  }

  addDepend(reactiveFn) {
    this.reactiveFns.push(reactiveFn)
  }

  notify() {
    this.reactiveFns.forEach(fn => {
      fn()
    })
  }

}

// 封装一个响应式函数
const depend = new Depend()
function watchFn(fn){
  depend.addDepend(fn)
}
// 对象的响应式
const obj = {
  name: "yz",
  age: 18
}

// 监听对象属性变量
const objProxy = new Proxy(obj, {
  get: function(target, key, receiver) {
    return Reflect.get(target, key, receiver)
  },
  set: function(target, key, newValue, receiver) {
    Reflect.set(target, key, newValue, receiver)
    depend.notify()
  }
})


watchFn(function() {
  const newName = objProxy.name
  console.log("haha");
  console.log(objProxy.name);
})
watchFn(function() {
  console.log(objProxy.name, "demo");
})


objProxy.name = "jay"
objProxy.name = "jay zhou"

